<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/echarts.js"></script>
    <script src="/jquery-3.7.0.min.js"></script>

</head>
<body>

<div id="main" style="width: 600px;height: 400px; margin: auto"></div>

<input id="A" style="display: none;" th:value="${A}"/>
<input id="B" style="display: none;" th:value="${B}"/>
<input id="C" style="display: none;" th:value="${C}"/>
<input id="D" style="display: none;" th:value="${D}"/>
<div style="text-align: center;">
    <table  style="width: 300px;margin: auto">
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
        <tr>
            <td th:text="${A}"></td>
            <td th:text="${B}"></td>
            <td th:text="${C}"></td>
            <td th:text="${D}"></td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        var myChart = echarts.init(document.getElementById('main'));

        let aResult = $("#A").val();
        let bResult = $("#B").val();
        let cResult = $("#C").val();
        let dResult = $("#D").val();
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '统计结果'
            },
            tooltip: {},
            legend: {
                data: ['票数']
            },
            xAxis: {
                data: ['A', 'B', 'C', 'D']
            },
            yAxis: {},
            series: [
                {
                    name: '票数',
                    type: 'bar',
                    data: [aResult, bResult, cResult, dResult]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })
</script>
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse; /* 移除单元格之间的间隔 */
    }
</style>
</body>
</html>